<template>
  <div>
    <div class="modifypass-content-top">修改密码</div>
    <div class="modifypass-content-bottom">
      <div class="modifypass-table">
        <el-form :inline="true">
          <el-form-item label="请输入账号:">
            <el-input style="width: 300px" v-model="accountName"></el-input>
          </el-form-item>
          <el-form-item label="请输入初始密码:">
            <el-input style="width: 300px" v-model="oldPassword"></el-input>
          </el-form-item>
          <el-form-item label="请输入修改密码:">
            <el-input style="width: 300px" v-model="newPassword"></el-input>
          </el-form-item>
          <el-form-item label="请重复修改密码:">
            <el-input style="width: 300px" v-model="repeatPassword"></el-input>
          </el-form-item>
          <p class="tips">密码必须是包含大写字母、小写字母、数字、特殊符号(#?!@$%^&*-)的8位以上组合</p>
          <el-form-item style="width: 300px;padding-top: 20px;">
            <el-button @click="modifySubmit" type="primary">保存</el-button>
            <el-button @click="resetInfo">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { changePwd } from "@/api/system/login";
export default {
  name: "modifypassword",
  data() {
    return {
      user: "",
      oldPassword: "",
      newPassword: "",
      accountName: "",
      repeatPassword: ""
    };
  },
  methods: {
    modifySubmit() {
      var self = this;
      console.log(self.user);
      if (self.oldPassword) {
        if (self.repeatPassword === self.newPassword) {
          let json = {
            password: self.oldPassword,
            passwordNew: self.newPassword,
            username: self.accountName
          };
          changePwd(json)
            .then(res => {
              // console.log(res,"res");
              self.msgSuccess(res.msg);
              self.$router.push("/login");
            })
            .catch();

        } else {
          this.msgError("重复密码输入不一致,请重新输入");
        }
      } else {
        this.msgError("初始化密码不能为空");
      }
    },
    resetInfo() {
      var self = this;
      self.oldPassword = "";
      self.newPassword = "";
      self.repeatPassword = "";
      self.$router.replace("/login");
    }
  },
  mounted() {
    // this.user = user;
  }
};
</script>

<style   scoped>
.modifypass-content-top {
  height: 34px;
  position: relative;
  text-align: center;
  top: 0;
  left: 0;
  background: #e6eff8;
  color: #000;
  width: 100%;
  line-height: 34px;
  font-size: 15px;
}

.modifypass-table {
  width: 600px;
  margin: 200px auto;
  padding-left: 160px;
  text-align: center;
}

.tips {
  font-size: 12px;
  width: 500px;
  text-align: left;
  margin-left: 8px;
  color: red;
}

/deep/ .el-form-item--medium {
  /deep/ .el-form-item__label {
    width: 120px !important;
  }
}
</style>
